<template>
  <div class="body-box">

    <!--  IT设备  -->
    <div class="it-box">数据中心运行环境实时监测系统-大屏</div>

  </div>
</template>
<script lang="ts" name="dashboard-analysis" setup>

import { useRouter } from 'vue-router'
import {onMounted, ref , defineProps} from 'vue';
import {defHttp} from "/@/utils/http/axios";

const router = useRouter();

const deviceInfo = ref({
  network: 32,
  physics: 146,
  storage: 16,
  safe: 8,
  other: 2,
})

onMounted(() => {
  
});



</script>
<style lang="less" scoped>
.body-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.it-box {
  padding-left: 20px;
  padding-bottom: 4px;
  font-size: 30px;
  width: 100%;
  height: 100%;
  align-items: center;
  text-align: center;
  justify-content: center;  
  border-bottom: #4472c4 solid 1px;
  margin: auto;
}

.father-device-box {
  width: 100%;
  padding: 80px 30px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}

.father-statistics-box {
  width: 100%;
  padding: 20px 30px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}

.father-table {
  border-radius: 10px;
  box-shadow: 4px 4px 10px #888888;
}
.device-box {
  padding: 30px;
  font-size: 16px;
  border-radius: 10px;
  background-color: white;
  height: 120px;
  align-items: center;
  display: flex;
  flex-direction: row;
  box-shadow: 4px 4px 10px #888888;
}

.device-box-icon {

  padding: 8px;
  background-color: transparent;
  border-radius: 5px;
  border: #172c51 solid 1px;
  color: white;

  img{
    height: 48px; 
    width: 48px;
  }
}

.device-box-font {
  margin-left: 20px;
  font-size: 2rem;
  font-weight: bold;
}

.device-box-num {
  margin-left: 20px;
  font-size: 2rem;
}

.device-box-link {
  margin-left: 30px;
  font-size: 2.2rem;
  font-weight: bold;
}

.father-table-box {
  padding: 20px 30px;
}

.circular-box{
  /*margin: 0 auto;*/
  background-color: white;
  text-align: center;
  width: 31%;
  border-radius: 10px;
  box-shadow: 4px 4px 10px #888888;
}
</style>
